<template>
  <div class="operate-list">
    <template v-for="(btn, index) in staticOperates" :key="btn.label">
      <a
        class="operate-button"
        type="text"
        size="small"
        :style="getStaticOperateBtnStyle(index)"
        :disabled="(btn.disabled && btn.disabled(cell.record, cell.column, cell.rowIndex)) || false"
        :plain="btn.plain || false"
        @click="btn.method(cell.record, cell.column, cell.rowIndex)"
      >
        {{ btn.label }}
      </a>
    </template>
    <a-trigger
      v-if="dropdownOperates && dropdownOperates.length > 0"
      position="br"
      trigger="hover"
      show-arrow
      scroll-to-close
      :arrow-style="{ border: '1px solid var(--color-fill-4)' }"
    >
      <a type="text" class="operate-button"> 更多<icon-down style="margin-left: 6px" /> </a>
      <template #content>
        <div class="operates-wrapper">
          <p v-for="btn in dropdownOperates" :key="btn.label">
            <a
              class="operate-button"
              type="text"
              size="small"
              :disabled="(btn.disabled && btn.disabled(cell.record, cell.column, cell.rowIndex)) || false"
              :plain="btn.plain || false"
              @click="btn.method(cell.record, cell.column, cell.rowIndex)"
            >
              {{ btn.label }}
            </a>
          </p>
        </div>
      </template>
    </a-trigger>
  </div>
</template>

<script setup>
  import { computed } from 'vue'
  // 定义 props
  const props = defineProps({
    operates: {
      type: Array,
      default: () => [],
    },
    cell: {
      type: Object,
      default: () => {},
    },
  })

  // 计算显示的按钮
  const visibleOpertes = computed(() => {
    let operates = props.operates || []
    let cell = props.cell
    let visibleOperates = operates.filter((btn) => {
      let flag =
        btn.show !== false &&
        (typeof btn.show === 'function' ? btn.show(cell.record, cell.column, cell.rowIndex) : true) &&
        (btn.permission ? btn.permission.flag : true)
      return flag
    })
    return visibleOperates
  })
  const staticNum = 4
  const staticOperates = computed(() => {
    let operates = visibleOpertes.value || []
    // 如果按钮数量不超过 staticNum
    if (operates.length <= staticNum) {
      return operates.slice(0, staticNum)
    } else {
      // 如果超过则取 staticNum - 1 个为固定显示，其他放到更多里
      return operates.slice(0, staticNum - 1)
    }
  })
  const getStaticOperateBtnStyle = (index) => {
    let list = staticOperates.value
    let curr = list[index]
    let currSpan = curr.label.length <= 5 ? 1 : 2
    let styleSheet = {
      width: '50%',
    }
    if (currSpan == 2) {
      styleSheet.width = '100%'
    }
    return styleSheet
  }
  const dropdownOperates = computed(() => {
    let operates = visibleOpertes.value || []
    if (operates.length > staticNum) {
      return operates.slice(staticNum - 1)
    }
    return []
  })
</script>
<style lang="less" scoped>
  .operate-list {
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .operate-button {
    min-width: 50%;
    display: inline-flex;
    align-items: center;
    height: 20px;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    border-radius: var(--border-radius-small);
    color: rgb(var(--primary-6));
    &:hover {
      font-weight: 600;
    }
  }
  .operates-wrapper {
    background-color: var(--color-bg-popup);
    border: 1px solid var(--color-fill-3);
    border-radius: var(--border-radius-medium);
    box-shadow: 0 4px 10px #0000001a;
    padding: 6px 12px;
    .operate-button {
      min-width: 60px;
      width: unset;
    }
  }
</style>
